<!--<template>-->
<!--  <div>-->
<!--    {{foo + counter}}-->
<!--    <span @click="handleAdd">+</span>-->
<!--  </div>-->
<!--</template>-->

<script>
  import { reactive, toRefs } from '@vue/composition-api'

  const useCountHooks = (defaultCount, b, c, d) => {

    console.log(`defaultCount ${defaultCount}`, b, c, d)

    //  state
    const state = reactive({
      counter: 0
    })

    // const renderDiv = this.$createElement('div','hello render fn')

    //  watch

    //  computed

    //  watchEffect

    //  refs
    const handleAdd = () => {
      state.counter++
    }
    return { ...toRefs(state), handleAdd }
  }

  export default {
    name: 'CompositeApiTest',
    props: {
      roleName: {
        type: String,
        default: 'azure'
      }
    },
    setup(props, context) {
      const state = reactive({
        foo: '🖼🎨🎗🎡🎠👕'
      })

      //  mixins 就这么被混入了,如果使用的是jsx或者render函数,那么更爽,
      //  mix中也可以返回dom变量,当然和原来一样可以传参数
      //  也可以把响应式对象传输进去
      const { handleAdd, counter } = useCountHooks(3)

      // const h = context.$createElement

      console.log(props, context)
      console.log(props.roleName)

      return { ...toRefs(state), handleAdd, counter }
    },
    render(h) {
      return h('div', [
        this.foo + this.counter,
        h('span', { on: { click: this.handleAdd } }, '+')
      ])
    }
  }
</script>

<style lang="scss" scoped>

</style>
